<template>
  <tabbar>
    <tabbar-item
      v-for="(tab,index) in tabbar"
      :num="index"
      :key="index"
      :selected="active==index"
      :link="tab.path"
    >
      <img slot="icon" :src="imgBasePath+tab.icon">
      <span slot="label">{{tab.name}}</span>
    </tabbar-item>
  </tabbar>
</template>


<script>
import { Tabbar, TabbarItem } from "vux";
import dsktConstant from "../config/constant";
export default {
  data() {
    var data = {
      active: 0,
      imgBasePath: "./static/img/",
      tabbar: [
        {
          name: "开单",
          path: "/tea_home",
          pathName: "tea_home",
          icon: "creat.png",
          iconCheck: "creat-ing.png"
        },
        {
          name: "考核单",
          path: "/tab_kaohedan",
          pathName: "tab_kaohedan",
          icon: "assess.png",
          iconCheck: "assess-ing.png"
        },
        {
          name: "申诉审核",
          path: "/shensu_shenhe",
          pathName: "shensu_shenhe",
          icon: "check.png",
          iconCheck: "check-ing.png"
        }
      ]
    };

   data.tabbar.push({
        name: "个人中心",
        path: "/user_center",
        pathName: "user_center",
        icon: "me.png",
        iconCheck: "me-ing.png"
      });
    return data;
  },

  watch: {
    $route: "changeActive"
  },

  created() {
    const toName = this.$route.name;
    this.setActive(toName);
  },

  methods: {
    changeActive({ name }) {
      this.setActive(name);
    },
    setActive(name) {
      this.tabbar.forEach((tab, i) => {
        if (tab.pathName == name) {
          this.active = i;
          tab.icon = tab.icon.replace(".png", "-ing.png");
          return false;
        } else {
          tab.icon = tab.icon.replace("-ing.png", ".png");
        }
      });
    }
  },

  components: {
    Tabbar,
    TabbarItem
  }
};
</script>
<style scoped>
.weui-tabbar {
  background: white;
}
/* .weui-tabbar__icon .weui-icon{
    font-size: 27px; 
}
.weui-tabbar__icon .weui-icon::before{
    margin-left: 0 !important; 
    margin-right: 0 !important; 
} */
</style>

